<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-21 21:36:39
 * @LastEditTime: 2019-11-24 22:54:33
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
   <!-- <script src="https://unpkg.com/vue"></script> -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{name}}</p>
    <p>{{age}}</p>
  </div>
  vue-响应式
  <script>
    var data = {
      name:'zhangsan',
      age: 26
    };
    var vm = new Vue({
      el:'#app',
      data:data
    });
    // 模拟实现 vue 响应式
    // 利用 Object.defineProperty 把data，myVm绑定到一起了，也就实现了vue中的 数据成改变，视图层跟着改变
    var myVm = {};
    for (key in data) {
      console.log('key: ', key);
      // 命中闭包，新建一个函数，保证key的独立作用域
      (function(key){
        Object.defineProperty(myVm, key,{
          get :function() {
            console.log('我是监听函数get',data[key]);
            return data[key]
          },
          set:function(newVale){
            console.log('我是监听函数set',newVale);
            data[key]=newVale;
          }
        })
      })(key);
    };
  </script>
</body>
</html>